<script lang="ts" setup>

import { ref, onMounted } from 'vue'
import * as admin from '@/api/admin.js'

const articles = ref([])
// 选中的类型
const selectedCategory = ref(null)
// 选择的时间
const createTime = ref(null)
// 可选择的类型
const categorys = ref(['购票','预约酒店'])

// 当前页
const pageNum = ref(1)//当前页
// const currentPage = ref(1)
// 每页条数
const pageSize = ref(10)

const total = ref(0)

const formatDate = (date) => {
    if (!date) {
      return '';
    }
  const d = new Date(date);
  const year = d.getFullYear();
  const month = String(d.getMonth() + 1).padStart(2, '0'); 
  const day = String(d.getDate()).padStart(2, '0');
  return `${year}-${month}-${day}`;
};

const articleLogList = async () => {
    let params = {
        currentPage: pageNum.value,
        createTime:formatDate(createTime.value)
    }
    console.log(params);
    let result = await admin.finyuyueService(params);

    //渲染视图
    total.value = result.total;
    articles.value = result.data;
}

const onCurrentChange = (num) => {
    pageNum.value = num
    articleLogList()
}


onMounted(() => {
    articleLogList()
})

</script>

<template>
    <el-card class="page-container">
        <template #header>
            <div class="header">
                <span>日志管理</span>
                <!-- <div class="extra">
                    <el-button type="primary" @click="visibleDrawer = true">添加景区</el-button>
                </div> -->
            </div>
        </template>
        <el-form inline>
            <!-- <el-form-item label="日志类型：">
                <el-select placeholder="请选择" v-model="selectedCategory" style="width: 200px;">
                    <el-option v-for="c in categorys" :key="c" :label="c" :value="c">
                    </el-option>
                </el-select>
            </el-form-item> -->
            <el-form-item label="日期：">
                <div class="block">
                <el-date-picker
                    v-model="createTime"
                    type="date"
                    placeholder="选择日期"
                    size="default"/>
                </div>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="articleLogList">搜索</el-button>
                <el-button @click="createTime = ''">重置</el-button>
            </el-form-item>
        </el-form>
            <el-table :data="articles" border style="width: 100%">
            <!-- <el-table-column prop="title" label="日志标题" min-width="180" /> -->
            <el-table-column prop="content" label="日志信息" min-width="180" >
                <template #default="{ row }">
                    <span v-if="row.jinquName">预约景区 {{ row.jinquName }}</span>
                    <span v-else-if="row.jiudianName">预约酒店 {{ row.jiudianName }}</span>
                </template>
            </el-table-column>
            <el-table-column prop="userName" label="操作用户" min-width="180" />
            <el-table-column prop="formatDate(createTime)" label="创建时间" min-width="180" >
                <template #default="{ row }">
                    {{ formatDate(row.createTime) }}
                    </template>
            </el-table-column>
            <el-table-column prop="type" label="日志类型" min-width="180" >
                <template #default="{ row }">
                    {{ row.jinquId  ? '景区预约' : '酒店预约' }}
                    </template>
            </el-table-column>
        </el-table>
        <el-pagination v-model:current-page="pageNum" v-model:page-size="pageSize"
            layout="jumper, total, prev, pager, next" background :total="total"
            @current-change="onCurrentChange" style="margin-top: 20px; justify-content: flex-end" />

    </el-card>
    
  </template>
  
<style scoped>
.header {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
</style>